
<template>
 <div>
   <div class="header" >
      <!-- <van-nav-bar 
      right-text="退出"
      @click-right="signOut">
    </van-nav-bar> -->
   </div>
   <div class="body">
        <van-nav-bar class="id"
      right-text="退出"
      @click-right="signOut" >
    </van-nav-bar>
     <div class="me">
       <img src="https://img.meituan.net/maoyanuser/9d89b1e45a5b7fd309b28b5f55269c3912416.png" alt="我的头像">
     </div>
     <div class="type">
       <h3>我的订单</h3>
       <div>
         <router-link to="">
           <i class="fa fa-video-camera" style="color:#fff;background:#df2d2d"></i>
           <p>电影</p>
         </router-link>
         <router-link to="">
           <i class="fa fa-lock" aria-hidden="true" style="color:#fff;background:#2dd3df"></i>
           <p>商城</p>
         </router-link>
       </div>
     </div>
     <div class="bottom">
       <p>
         <router-link to="">在线观影</router-link>
       </p>
       <p>
         <router-link to="/tickets">优惠券</router-link>
       </p>
       <p>
         <router-link to="">折扣卡</router-link>
       </p>
     </div>
   </div>
   <!-- <router-view></router-view> -->
 </div>
</template>

<script>
import Vue from 'vue'
import {NavBar} from 'vant'
Vue.use(NavBar)
export default {
 
  methods: {
    signOut () {
      this.$router.replace('login')
      window.localStorage.removeItem('userInfo')
      window.localStorage.removeItem('token')
      window.localStorage.removeItem('Yzm')
      this.$store.commit('sinOut')
    }
  }
}
</script>

<style scoped lang="scss">
van-nav-bar{
 color:white; 
  }
  body,html{
    height:100%;
  }
  .header{
    height:50px;
    width:100%;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 20px;
    background: #df2d2d;
    color: #fff;
    h1{
      flex: 1;
    }
  }
  .me{
    height:150px;
    background:#f03d37;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width:66px;
      height: 66px;
      border-radius: 50%;
    }
  }
  .type{
    height:150px;
    margin:15px;
    display: flex;
    flex-direction: column;
    h3{
      width:100%;
      height:30px;
      line-height: 30px;
      text-align: center;
      color:#333;
    }
    div{
      flex:1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      a{
        flex: 1;
        height:120px;
        display: flex;
        justify-content: center;
        align-items: center;
        i{
          display: block;
          width:50px;
          height:50px;
          line-height: 50px;
          text-align: center;
          border-radius: 50%;
          background: pink;
          font-size:25px;
          margin-right: 15px;
        }
        p{
          color:#333;
        }
      }
    }
  }
  .bottom{
    padding-left: 15px;
    p{
      height:44px;
      line-height: 44px;
      padding-left: 10px;
      a{
        color:#333;
      }
    }
  }
</style>
